<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>Openfire Login</title>
	<link rel='stylesheet' href='/strophe/public/css/jquery-ui-1.8.21.custom.css'>
	<link rel='stylesheet' href='/strophe/public/css/hello.css'>
	<script type="text/javascript" src="/strophe/public/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/strophe/public/js/jquery-ui-1.8.21.custom.min.js"></script>
	<script type="text/javascript" src="/strophe/public/js/strophe.js"></script>
	<script type="text/javascript" src="/strophe/public/js/flXHR.js"></script>
	<script type="text/javascript" src="/strophe/public/js/strophe.flxhr.js"></script>
	<script type="text/javascript">
		var BOSH_SERVICE = "http://172.20.240.228:7070/http-bind/";
		var connection = null;
		var jid = null;
		var toJid = null;
		
		var Hello = {
			connection: null,
			startTime: null,
			
			log: function(msg) {
				$('#log').append("<p>" + msg + "</p>");
			},
			
			ping: function(to) {
				var ping = $iq({
					to: to,
					type: "get",
					id: "ping1"
				}).c("ping", {xmlns: "urn:xmpp:ping"});
				
				Hello.log("Sending ping to " + to + ".");
				Hello.startTime = (new Date()).getTime();
				Hello.connection.send(ping);
			},
			
			handlePong: function(iq) {
				var elapsed = (new Date()).getTime() - Hello.startTime;
				Hello.log("Received pong from server in " + elapsed + " ms");
				
				return true;
			},
			
			handlePresence: function(presence) {
				var type = $(presence).attr('type');
				var from = $(presence).attr('from');
				var show = $(presence).find('show').text();
				
				Hello.log("Received presence update. type: " + type + ", from: " + from + ", show: " + show);
				
				return true;
			},
			
			handleMessage: function(message) {
				var from = Strophe.getBareJidFromJid($(message).attr('from'));
				var body = $(message).find("html > body");
				if (body.length == 0) {
					body = $(message).find("body");
					if (body.length > 0) {
						body = body.text();
					}
					else {
						body = null;
					}
				}
				else {
					body = body.contents();
				}
				
				if (body) {
					toJid = from;
					Hello.log("Received message. " + from + ": " + body);	
				}
				
				return true;
			},
			
			sendMessage: function(body) {
				var message = $msg({
					to: toJid,
					"type": "chat"
				}).c('body').t(body);
				
				Hello.connection.send(message);
			}
		};
		
		$(document).ready(function () {
			$('#login').dialog({
				autoOpen: true,
				draggable: false,
				modal: true,
				title: 'Connect to XMPP',
				buttons: {
					"Connect": function() {
						jid = $('#node').val() + '@' + $('#domain').val();
						
						$(document).trigger('connect', {
							jid: jid,
							password: $('#password').val()
						});
						
						$('#password').val('');
						$(this).dialog('close');
					}
				}
			});
			
			$('#disconnect').click(function() {
				Hello.connection.disconnect();
			});
			
			$('#send').click(function() {
				var body = $('#chat').val();
				Hello.sendMessage(body);
				Hello.log(jid + ": " + body);
			});
			
			$(document).bind('connect', function(event, data) {
				var connection = new Strophe.Connection(BOSH_SERVICE);
				connection.connect(data.jid, data.password, function (status) {
					$('#status').html("<p>status: " + getStatusMessage(status) + "</p>");
					
					if (status == Strophe.Status.CONNECTED) {
						$(document).trigger('connected');
					}
					else if (status == Strophe.Status.DISCONNECTED) {
						$(document).trigger('disconnected');
					}
				});
				
				Hello.connection = connection;
			});
			
			$(document).bind('connected', function() {
				// inform the user
				Hello.log("Connection established.");
				
				// send presence
				var presence = $pres().c("status").t("online");
				Hello.connection.send(presence);
				
				Hello.connection.addHandler(Hello.handlePong, null, "iq", null, "ping1");
				Hello.connection.addHandler(Hello.handlePresence, null, "presence", null, null);
				Hello.connection.addHandler(Hello.handleMessage, null, "message", null, null);
				
				var domain = Strophe.getDomainFromJid(Hello.connection.jid);
				Hello.ping(domain);
			});
			
			$(document).bind('disconnected', function() {
				Hello.log("Connection terminated.");
				
				// remove dead connection object
				Hello.connection = null;
			});
		});
		
		function getStatusMessage(status) {
			if (status == Strophe.Status.ERROR) {
				return "error";
			}
			else if (status == Strophe.Status.CONNECTING) {
				return "connecting";
			}
			else if (status == Strophe.Status.CONNFAIL) {
				return "connection failed";
			}
			else if (status == Strophe.Status.AUTHENTICATING) {
				return "authenticating";
			}
			else if (status == Strophe.Status.AUTHFAIL) {
				return "authentication failed";
			}
			else if (status == Strophe.Status.CONNECTED) {
				return "connected";
			}
			else if (status == Strophe.Status.DISCONNECTED) {
				return "disconnected";
			}
			else if (status == Strophe.Status.DISCONNECTING) {
				return "disconnecting";
			}
			else if (status == Strophe.Status.ATTACHED) {
				return "attached";
			}
			else {
				return "unknown";
			}
		}
	</script>
</head>
<body>
	<h1>Hello</h1>
	<div id="log"></div>
	<form>
		<div>
			<input type="text" id="chat" size="30"><input type="button" id="send" value="Send"><br>
			<input type="button" id="disconnect" value="disconnect">
		</div>		
	</form>
	
	<!-- Login dialog -->
	<div id="login" class="hidden">
		<label>JID:</label><input type="text" id="node"/>@<input type="text" id="domain" value="openfire2.muchine.com"><br>
		<label>Password:</label><input type="password" id="password"/>
	</div>
	<div id="status"></div>
</body>
</html>
